<template>
	<view class="login-page">
		<view class="bg">
			<view class="icon_box">
				<text class="iconfont icon-fanhui" @click="back"></text>
			</view>
		</view>
		<view class="login-form">
			<view class="title">
				用户登录
			</view>
			<view class="login-form-item">
				<input v-model="mobile" maxlength="11" placeholder="请输入您的手机号" />
				<iconfont icon="phone" color="#999999"></iconfont>
			</view>
			<view class="login-form-item ">
				<input v-model="password" type="password" maxlength="20" placeholder="请输入您的登录密码" />
			    <iconfont icon="pwd" color="#999999"></iconfont>
			</view>
			<view class="operation">
				<text @click="navtoRegister">注册</text>
				<!-- <text @click="navtoforget">忘记密码</text> -->
		    </view>
			<button class="big-btn" type="primary" @click="loginFn">登录</button>  
		</view>                                                                            
	</view>
</template>
<script>

import { REGEX } from '@/common/env.js'
export default {
	data() {
		return {
			mobile: '', // 手机号
			password: '', // 密码
		}
	},
	
	methods: {
		// 登录按钮
		async loginFn() {

			if (this.mobile == '') {
				this.$u.toast('手机号不能为空')
				return
			}
			
			if (this.password == '') {
				this.$u.toast('密码不能为空')
				return
			}
			
			const params = {
				mobile: this.mobile,
				password: this.password
			}
			const res = await this.http.httpRequest('/login/login','post', params)
		    if (res.data.code == 1) {
		    	this.$u.toast('登录成功');
				this.$store.commit('setLoginStatus', true)
				this.$store.commit('setUserinfo', res.data.data.member)
				this.$store.commit('setUid', res.data.data.uid)
		    	setTimeout(() => {
		    	  uni.switchTab({
		    	  	url:'/pages/index/index',
					
		    	  })	
		    	}, 500)
		    } else {
		    	this.$u.toast('登录失败')
		    }
		},
		back () {
			uni.switchTab({
				url:'/pages/index/index',
								
			})
		},
		navtoRegister () {
			uni.navigateTo({
				url: '/pages/register/register'
			})
		},
		navtoforget () {
			uni.navigateTo({
				url: '/pages/forgetPassword/forgetPassword'
			})
		}
	}
}
</script>
<style lang="scss">
.login-page {
	height: 100%;
	// padding: 140upx 40upx 40upx;
	color: #333;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
.bg {
	width: 100%;
	height: 450rpx;
	background-color: #ceb686;
	.icon_box {
		padding-top: 70rpx;
		padding-left: 18rpx;
		.iconfont {
			font-size: 56rpx;
			color: #FFFFFF;
		}
	}
}
.login-form {
	box-sizing: border-box;
	border-radius: 24rpx;
	padding: 40rpx 80rpx;
	border: 2rpx solid #efefef;
	width: 680rpx;
	height: 720rpx;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #FFFFFF;
}
.login-form .title {
	font-weight: 600;
	line-height: 56rpx;
	text-align: center;
	margin-bottom: 60rpx;
}

.login-page input {
	padding: 0 20upx 0 0upx;
	height: 90upx;
	line-height: 90upx;
	text-align: left;
}

.login-page .login-form-item {
    position: relative;
    margin-bottom: 40upx;
    font-size: 30upx;
	border-bottom: 1px solid #e8e3e3;
}

.login-page .login-form-item .iconfont {
	position: absolute;
	right: 20upx;
	top: 24upx;
	width: 40upx;
	height: 40upx;
	font-size: 40upx;
	padding-right: 20upx
}
.operation {
	margin-top: -14upx;
	display: flex;
	justify-content: flex-end;
	right: 24rpx;
	text {
		padding-left: 12rpx;
		color: #ceb686;
		font-size: 28rpx;
	}
}

.common-btn {
	margin: 100upx auto;
}
.big-btn {
	margin-top: 120rpx;
	width: 480rpx;
}

</style>
